<!DOCTYPE html>
<!--
Copyright 2012 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>PDF.js viewer</title>


    <link rel="stylesheet" href="viewer.css"/>
    <link rel="resource" type="application/l10n" href="locale/locale.properties"/>
    <link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
    <script type="text/javascript" src="l10n.js"></script>
    <script type="text/javascript" src="../build/pdf.js"></script>
    <script type="text/javascript" src="/shared/js/async_storage.js"></script>

    <script type="text/javascript" src="viewer.js"></script>
  </head>


  <body>
    <section role="region" id="activityHeader" class="skin-organic">
      <header>
        <button id="activityClose"><span class="icon icon-close"></span></button>
        <h1 id="activityTitle"></h1>
      </header>

      <footer id="open-toolbar">
        <button class="toolbarButton pageUp" title="Previous Page" id="previous" data-l10n-id="previous"></button>
        <button class="toolbarButton pageDown" title="Next Page" id="next" data-l10n-id="next"></button>

        <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">

        <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" data-l10n-id="zoom_out"></button>
        <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" data-l10n-id="zoom_in"></button>
      </footer>
    </section>

    <div id="viewerContainer">
      <div id="viewer"></div>
    </div>

    <div id="loadingBar">
      <div class="progress"></div>
      <div class="glimmer"></div>
    </div>

    <div id="errorWrapper" hidden='true'>
      <div id="errorMessageLeft">
        <span id="errorMessage"></span>
        <button id="errorShowMore" data-l10n-id="error_more_info">
          More Information
        </button>
        <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
          Less Information
        </button>
      </div>
      <div id="errorMessageRight">
        <button id="errorClose" data-l10n-id="error_close">
          Close
        </button>
      </div>
      <div class="clearBoth"></div>
      <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
    </div>

    <!-- BEGIN STUBS -->
    <!--
      Nothing below here is visible, the elements are just here
      to prevent the viewer from breaking until we refactor it.
    -->
    <div id="stubs" style="display: none;">
      <div id="outerContainer"></div>
      <div id="sidebarContainer">
        <div id="toolbarSidebar">
          <button id="viewThumbnail"></button>
          <button id="viewOutline"></button>
        </div>
        <div id="sidebarContent">
          <div id="thumbnailView"></div>
          <div id="outlineView"></div>
        </div>
      </div>  <!-- sidebarContainer -->

      <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="17" data-l10n-id="tools">
        <span data-l10n-id="tools_label">Tools</span>
      </button>
      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
        <div id="secondaryToolbarButtonContainer">
          <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="18" data-l10n-id="presentation_mode">
            <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
          </button>

          <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="19" data-l10n-id="open_file">
            <span data-l10n-id="open_file_label">Open</span>
          </button>

          <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="20" data-l10n-id="print">
            <span data-l10n-id="print_label">Print</span>
          </button>

          <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="21" data-l10n-id="download">
            <span data-l10n-id="download_label">Download</span>
          </button>

          <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="22" data-l10n-id="bookmark">
              <span data-l10n-id="bookmark_label">Current View</span>
          </a>

          <div class="horizontalToolbarSeparator visibleLargeView"></div>

          <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="22" data-l10n-id="first_page">
            <span data-l10n-id="first_page_label">Go to First Page</span>
          </button>
          <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="23" data-l10n-id="last_page">
            <span data-l10n-id="last_page_label">Go to Last Page</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="24" data-l10n-id="page_rotate_cw">
            <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
          </button>
          <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="25" data-l10n-id="page_rotate_ccw">
            <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
          </button>
        </div>
      </div>  <!-- secondaryToolbar -->

      <div id="mainContainer">
        <div id="findbar">
          <input id="findInput">
          <button id="findPrevious"></button>
          <button id="findNext"></button>
          <input type="checkbox" id="findHighlightAll">
          <input type="checkbox" id="findMatchCase">
          <span id="findMsg"></span>
        </div>
        <div id="toolbarContainer">
          <div id="toolbarViewer">
            <div id="toolbarViewerLeft">
              <button id="sidebarToggle"></button>
              <button id="viewFind"></button>
              <span id="numPages"></span>
            </div>
            <div id="toolbarViewerRight">
              <button id="presentationMode"></button>
              <input id="fileInput" type="file" />
              <button id="fullscreen"></button>
              <button id="openFile"></button>
              <button id="print"></button>
              <button id="download"></button>
              <!-- <div class="toolbarButtonSpacer"></div> -->
              <a href="#" id="viewBookmark"></a>
            </div>
            <div id="toolbarViewerMiddle">
              <span id="scaleSelectContainer">
                 <select id="scaleSelect">
                  <option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
                  <option id="pageActualOption" value="page-actual">Actual Size</option>
                  <option id="pageFitOption" value="page-fit">Fit Page</option>
                  <option id="pageWidthOption" value="page-width">Full Width</option>
                  <option id="customScaleOption" value="custom"></option>
                  <option value="0.5">50%</option>
                  <option value="0.75">75%</option>
                  <option value="1">100%</option>
                  <option value="1.25">125%</option>
                  <option value="1.5">150%</option>
                  <option value="2">200%</option>
                </select>
              </span>
            </div>
          </div>
        </div>
        <menu type="context" id="viewerContextMenu">
          <menuitem id="contextFirstPage" label="First Page"
                    data-l10n-id="first_page"></menuitem>
          <menuitem id="contextLastPage" label="Last Page"
                    data-l10n-id="last_page"></menuitem>
          <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                    data-l10n-id="page_rotate_cw"></menuitem>
          <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                    data-l10n-id="page_rotate_ccw"></menuitem>
        </menu>

      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
        <div id="promptContainer">
          <div id="passwordContainer" class="prompt doorHanger">
            <div class="row">
              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
            </div>
            <div class="row">
              <input type="password" id="password" class="toolbarField" />
            </div>
            <div class="row">
              <button id="passwordCancel" class="promptButton"><span data-l10n-id="password_cancel">Cancel</span></button>
              <button id="passwordSubmit" class="promptButton"><span data-l10n-id="password_ok">OK</span></button>
            </div>
          </div>
        </div>
      </div>

      <div id="printContainer"></div>
    </div>
    <!-- END STUBS -->
  </body>
</html>

